<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<style>
		.a{
			height: 50px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<!-- 
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
			屏幕宽度与移动设备一致，初始缩放100%,最大缩放100%,禁止用户进行缩放操作

		1)	.container 									//所有内容必须要写在这个div里面
		2)	.container-fluid 							//流动性适应,宽度一直是100%
		3)	栅格系统最多12列
		4) 	栅格参数：查看栅格系统参数.html
		5)	偏移.col-**-offset-1 						//往右进一列，类似于加了margin-left
		6)	嵌套
		7)	换位
				.col-**-push-1 							//往右前进一列	push→
				.col-**-pull-1 							//往左前进一列	←pull
		补充:
			1)	.img-responsive 					//图片响应式
			2)	.hidden-xs 							//其他宽度默认显示，当显示器宽度小于768px是隐藏当前元素。还有sm、md、lg
			3)	.visible-xs 						//其他宽度默认因隐藏，当显示器宽度小于768px是显示当前元素。还有sm、md、lg
				【其实还可以执行显示的类型有 .visible-xs-block  或 .visible-xs-ininline，可根据要求写或不写】
	 -->

	<!-- <div class="container"> -->
	<!-- <div class="container-fluid">
	 <div class="row">
			<div class="col-md-1 a">1</div>
			<div class="col-md-1 a">2</div>
			<div class="col-md-1 a">3</div>
			<div class="col-md-1 a">4</div>
			<div class="col-md-1 a">5</div>
			<div class="col-md-1 a">6</div>
			<div class="col-md-1 a">7</div>
			<div class="col-md-1 a">8</div>
			<div class="col-md-1 a">9</div>
			<div class="col-md-1 a">10</div>
			<div class="col-md-1 a">11</div>
			<div class="col-md-1 a">12</div>
		</div>
		<div class="row">
			<div class="col-md-9 a">9</div>
			<div class="col-md-3 a">3</div>
		</div>
		<div class="row">
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
		</div> -->
	

	<!-- 
		如果是大屏幕(width ≥ 1200px),	一列占3格,显示4列
		如果是中屏幕(width ≥ 970px),	一列占4格,显示3列
		如果是小屏幕(width ≥ 768px),	一列占6格,显示2列
		如果是超小屏幕(width < 768px),	一列占12格,显示1列.1列就可以不用写了
	 -->
	<!-- <div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 a">1</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">2</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">3</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">4</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">5</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">6</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">7</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">8</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">9</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">10</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">11</div>
		<div class="col-lg-3 col-md-4 col-sm-6 a">12</div>
	</div> -->
	

	<!-- 偏移 -->
	<!-- <div class="row">
		<div class="col-md-8 a">8</div>
		<div class="col-md-3 col-md-offset-1 a">3</div>
	</div> -->
	 
	<!-- 嵌套 -->
	<!-- <div class="row">
		<div class="col-md-9 a">
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
		</div>
		<div class="col-md-3 a">3</div>
	</div> -->
	

	<!-- 换位 -->
	<!-- <div class="row">
		<div class="col-md-4 col-md-push-8 a">4</div>
		<div class="col-md-3 col-md-pull-4 a">3</div>
		<div class="col-md-5 col-md-pull-4 a">5</div>
	</div> -->
	
	<!-- hidden- -->
	<!-- <div class="row">
		<div class="col-md-4 a">1</div>
		<div class="col-md-4 hidden-xs a">2</div>
		<div class="col-md-4 visible-lg a">3</div>
	</div> -->
	
</div>


	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>